<template>
  <div class="app-container">
    <div class="query-container">
      <el-form
        v-show="showSearch"
        ref="queryForm"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item :label="$t('calendarType')" prop="calendar_type">
          <el-input
            v-model="queryParams.calendar_type"
            :placeholder="$t('inputCalendarType')"
            clearable
            size="small"
            style="width: 220px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item :label="$t('calendarName')" prop="calendar_name">
          <el-input
            v-model="queryParams.calendar_name"
            :placeholder="$t('inputCalendarName')"
            clearable
            size="small"
            style="width: 260px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item :label="$t('calendarName')" prop="calendar_name">
          <el-date-picker-pro
            v-model="value"
            type="date"
            size="small"
            calendar-type="A"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >{{ $t('search') }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
            $t('reset')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tool-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >{{ $t('addBtn') }}</el-button>
        </el-col>
        <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
      </el-row>
    </div>
    <el-table-pro
      :highlight-current-row="true"
      :data="calendarTypeList"
      :loading="loading"
      :columns-config="columnsConfig"
      @sort="sortChange"
    >
      <el-table-column
        :label="$t('operate')"
        align="center"
        width="300"
        fixed="right"
        class-name="fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-auth="[]"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >{{ $t('modifyBtn') }}</el-button>
          <el-button
            v-auth="[]"
            :disabled="scope.row.exist_calendar"
            size="mini"
            type="text"
            icon="el-icon-magic-stick"
            @click="handleGenerateCalendar(scope.row)"
          >{{ $t('generateCalendarBtn') }}</el-button>
          <el-button
            v-auth="[]"
            :disabled="!scope.row.exist_calendar"
            size="mini"
            type="text"
            icon="el-icon-document-add"
            @click="handleExtendCalendar(scope.row)"
          >{{ $t('extendCalendarBtn') }}</el-button>
          <el-dropdown
            v-more
            size="mini"
            trigger="click"
            @command="command => handleCommand(command, scope.row)"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right" />{{ $t('moreBtn') }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-auth="[]"
                :disabled="!scope.row.exist_calendar"
                command="handleAdjustCalendar"
                icon="el-icon-refresh"
              >{{ $t('adjustCalendarBtn') }}</el-dropdown-item>
              <el-dropdown-item
                v-auth="[]"
                command="handleDelete"
                icon="el-icon-delete"
              >{{ $t('deleteBtn') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table-pro>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.page_size"
      @pagination="getList"
    />
    <calendar-type-sheet ref="sheetRef" @refreshList="getList" />
    <calendar-adjust ref="adjustCalendarRef" />
  </div>
</template>

<script>
import { getCalendarTypeListApi, deleteCalendarTypeApi, extendCalendarApi, generateCalendarApi } from '../api/calendars.api'
import ElTablePro from '@/components/ElTablePro'
import ElDatePickerPro from '@/components/ElDatePickerPro'
import listMixin from '@/mixins/ListMixin'
import CalendarTypeSheet from './calendar-type-sheet.vue'
import CalendarAdjust from './calendar-adjust.vue'
export default {
  name: 'CalendarTypeList',
  components: {
    ElTablePro,
    ElDatePickerPro,
    CalendarTypeSheet,
    CalendarAdjust
  },
  mixins: [listMixin],
  data() {
    return {
      value: undefined,
      showSearch: true,
      calendarTypeList: [],
      queryParams: {
        'calendar_type': undefined,
        'calendar_name': undefined
      },
      actionApi: {
        'delete': deleteCalendarTypeApi
      }
    }
  },
  computed: {
    columnsConfig() {
      return [
        { prop: 'calendar_type', label: this.$t('calendarType'), sortable: true, 'width': 150 },
        { prop: 'calendar_name', label: this.$t('calendarName'), sortable: true, 'min-width': 180 },
        { prop: 'holiday', label: this.$t('calendarHoliday'), sortable: true, 'min-width': 120 },
        { prop: 'created', label: this.$t('createdUser'), 'min-width': 150 },
        { prop: 'created_date', label: this.$t('createdDate'), 'min-width': 180 },
        { prop: 'created_program', label: this.$t('createdProgram'), 'min-width': 150, 'show-overflow-tooltip': true },
        { prop: 'updated', label: this.$t('updatedUser'), 'min-width': 150 },
        { prop: 'updated_date', label: this.$t('updatedDate'), 'min-width': 180 },
        { prop: 'updated_program', label: this.$t('updatedProgram'), 'min-width': 150, 'show-overflow-tooltip': true }
      ]
    }
  },
  methods: {
    async getList() {
      // 查询前启动遮罩层
      this.loading = true;
      // 查询数据
      var resp = await getCalendarTypeListApi(this.queryParams)
      if (resp.success) {
        // 接口执行成功，关闭遮罩层
        this.total = resp.data.count;
        this.calendarTypeList = resp.data.results
        this.loading = false;
      } else {
        // 接口执行失败，提示错误信息并关闭遮罩层
        this.targaMessageBox(this, resp.msg);
        this.loading = false;
      }
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleDelete':
          this.handleDelete(row);
          break;
        case 'handleAdjustCalendar':
          this.handleAdjustCalendar(row);
          break;
        default:
          break;
      }
    },
    handleAdd() {
      this.$refs.sheetRef.openSheetDialog()
    },
    handleUpdate(row) {
      this.$refs.sheetRef.openSheetDialog({ ...row })
    },
    handleAdjustCalendar(row) {
      this.$refs.adjustCalendarRef.openSheetDialog({ ...row })
    },
    async handleGenerateCalendar(row) {
      const confirmMessage = this.$t('generateCalendarConfirm', { title: this.$t('calendarType'), value: row.calendar_type })

      const confirmOptions = {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        cancelButtonClass: 'btn-cancel-to-right',
        type: 'warning'
      };

      try {
        await this.$confirm(confirmMessage, this.$t('warning'), confirmOptions);
        const resp = await generateCalendarApi({ calendar_type: row.calendar_type })
        if (resp.success) {
          this.targaMessage(this.$t('executeSuccess'));
          this.getList();
        } else {
          this.targaMessageBox(this, resp.msg);
        }
      } catch (err) {
        console.error(err);
      }
    },
    async handleExtendCalendar(row) {
      const confirmMessage = this.$t('extendCalendarConfirm', { title: this.$t('calendarType'), value: row.calendar_type })

      const confirmOptions = {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        cancelButtonClass: 'btn-cancel-to-right',
        type: 'warning'
      };

      try {
        await this.$confirm(confirmMessage, this.$t('warning'), confirmOptions);
        const resp = await extendCalendarApi({ calendar_type: row.calendar_type })
        if (resp.success) {
          this.targaMessage(this.$t('executeSuccess'));
          this.getList();
        } else {
          this.targaMessageBox(this, resp.msg);
        }
      } catch (err) {
        console.error(err);
      }
    },
    handleDelete(row) {
      const confirmMessage = this.$t('dataDeleteConfirm', { title: this.$t('calendarType'), value: row.calendar_type })
      const successMessage = this.$t('deleteSuccess', { title: this.$t('calendarType'), value: row.calendar_type })
      this.handleAction('delete', row.id, confirmMessage, successMessage)
    }
  }

}
</script>

